<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    {{name}}
    {{num}}
    {{flag}}
    <button @click="num++">点我+1</button>
    <button @click="flag=true">flag</button>

    <!--条件渲染 满足条件显示内容 v-if="表达式"
    不满足条件的元素直接移除
    -->
    <h2 v-if="flag">你好1</h2>
    <h2 v-if="1 == 1">你好2</h2>
    <h2 v-if="1 === '1'">你好3</h2>

    <h2 v-if="num === 1">java</h2>
    <h2 v-else-if="num === 2">mysql</h2>
    <h2 v-else>回家种地</h2>

    <hr>
    <!--v-show控制元素的渲染 但是与v-if不同的是 控制的是元素的显示和隐藏  适合频繁切换-->
    <h2 v-show="num === 1">java</h2>
    <h2 v-show="num === 2">mysql</h2>
    <h2 v-show>回家种地</h2>
    <hr>
<!--如果想要控制一段代码的展示与隐藏 模版 不能使用v-show template渲染时不会存在于中无法添加display-->
    <template v-if="num === 6">
    <h2>afasd</h2>
    <h2>dff</h2>
    <h2>ff</h2>
    <h2>ff</h2>
    <h2>ff</h2>
    <h2>ff</h2>
    </template>
</div>

</body>
</html>

<script>
    new Vue({
        el:'#app',
        data(){
            return{
                name:'张三',
                num:0,
                flag:false
            }
        }
    });
</script>